<template>
    <div class="newsDetails">
      <mt-header v-bind:title="title">
        <router-link to="" slot="left">
          <mt-button icon="back" @click="backOne()">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <div class="news-content">
        <!--<h1>新闻的标题</h1>-->
        <p>新闻的内容新闻的内容新闻的内容新闻的内容新闻的内容新闻的内容新闻的内容新闻的内容</p>
        <p>新闻的内容新闻的内容新闻的内容</p>
        <hr>
      </div>
      <!--<div>
        &lt;!&ndash;<img src="#" style="float:left;display:block;height:26px;width:26px;margin:8px;">&ndash;&gt;
        <mt-cell title="lizhaowen:" label="2017-02-05">
        </mt-cell>
        <p style="font-size:14px;padding-left:20px;">
          good!
        </p>

      </div>-->

      <div class="comment" v-for=" (item , index) in commentList">
        <div class="comment-title">
          <div class="title-left">
            <img src="#">
          </div>
          <div class="title-right">
            <div class="comment-name">{{ item.name }}:</div>
            <div class="comment-time">{{ item.time }}</div>
          </div>
          <div style="clear:both"></div>
        </div>

        <div class="comment-body">
          <p style="width:305px;word-wrap: break-word;word-break: normal; ">{{ item.content }}</p>
          <!--<span style="font-size:12px;" @click.native="popupVisible = true; js_switch = 2;">评论</span>-->
          <!---->
          <div class="comments-comment" v-for="list in item.commentsComment">
            <div class="comment-title">
              <div class="title-left">
                <img src="#">
              </div>
              <div class="title-right">
                <div class="comment-name">{{ list.name }}:</div>
                <div class="comment-time">{{ list.time }}</div>
              </div>
              <div style="clear:both"></div>
            </div>
            <div class="comment-body">
              {{ list.content }}
            </div>

          </div>
        </div>
      </div>

      <mt-tabbar  fixed @click.native="popupVisible = true; js_switch = 1">
        <input type="text" class="commented"  readonly="readonly" placeholder="发表评论">
        <!--<mt-button @click.native="popupVisible = true; js_switch = 1" size="large">下侧弹出 popup</mt-button>-->
      </mt-tabbar>

      <mt-popup
        class="comment-popup"
        v-model="popupVisible"
        position="bottom">
        <mt-header title="">
          <router-link to="" slot="left">
            <mt-button icon="back" @click="popupVisible = false">返回</mt-button>
          </router-link>
          <mt-button icon="" slot="right" @click="commented()">发表</mt-button>
        </mt-header>


        <mt-field placeholder="评论..." type="textarea" rows="20" v-model="textContent"></mt-field>


        *点击右上角发表发布评论.
      </mt-popup>

      <div style="height:50px;"></div>
    </div>
</template>
<style>
  /* comment-popup */
  .comment-popup{
    width:100vw;
    height:100vh;
  }
  /**/
  .commented{
    margin: 10px;
    border:1px solid #CCC;
    border-radius:8px;
  }
  .commented input{
    padding:4px 8px;
  }
  /* template for comment */
  .comment{
    font-size:16px;
    padding: 0 10px;
  }
  .comment-title:{
    padding: 10px 0;
  }
  .title-left{
    float:left;
  }
  .title-left img{
    width: 38px;
    height: 38px;
  }
  .title-right{
    margin-left:12px;
    float:left;
    line-height:1.2em;
  }
  .comment-name{
  }
  .comment-time{
    font-size:12px;
  }
  .comment-body{
    margin-left: 48px;
    border-top: 1px solid #EEE;

    line-height:1.5em;
    padding: 8px 0;

  }

  .news-content{
    padding:10px;
  }
  .news-content p{
    text-indent:2em;
  }
</style>
<script>
    export default{
        name : 'newsDetails',
        data(){
            return{
                title:'',
                //
                popupVisible:false,
                //
                textContent:'',
                //
                commentList:[],
                js_switch:'',
                js_comment_one:{
                    name:'李钊文',
                    time:'1970-01-01',
                    content:'',
                    commentsComment:[]
                },
                js_comment_second:{
                    name:'',
                    time:'',
                    content:''
                }
            }
        },
        components:{
        },
        mounted:function(){
            // 初始化的时候 js_comment_one.name = username
            this.$nextTick(function(){
                //console.log(this.$route.params);
                this.title = this.$route.params.newsId;
            })
        },
        methods:{
            //back router one
            backOne(){
                this.$router.back();
            },
            //comment comments
            commented:function(){
                //给comment赋值
                //time
                const myDate = new Date();
                //this.js_comment_one.time = myDate.getFullYear() + '-' myDate.getMonth();
                const time = `${ myDate.getFullYear() }-${ myDate.getMonth()+1 }-${myDate.getDate()}  ${myDate.toLocaleTimeString()} `;
                //1 2class
                if( this.js_switch === 1){
                    const js_comment = {
                        name:'lizhaowen',
                        time:'',
                        content:'',
                        commentsComment:[]
                    };
                    js_comment.time = time;
                    js_comment.content = this.textContent;
                    this.textContent = '';
                    this.commentList.unshift(js_comment);
                }else if( this.js_switch === 2){

                }


                this.popupVisible = false;
            }
        }
    }
</script>
